<template>
	<view>
		<!-- #ifdef H5 -->
		<view v-for="(item, index) in styleConfig" :key="index" @click="bindParent(item)">
			<component
				:is="item.name"
				:index="index"
				:activeName="activeName"
				:dataConfig="item"
				@changeBarg="changeBarg"
				@changeTab="changeTab"
				:tempArr="tempArr"
				:iSshowH="iSshowH"
				@detail="goDetail"
				@bindIframe="bindIframe"
			></component>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<block v-for="(item,index) in styleConfig" :key='index'>
			<a_headerSerch v-if='item.name=="a_headerSerch"' :dataConfig="item"></a_headerSerch>
			<b_swiperBg v-if='item.name=="b_swiperBg"' :dataConfig="item"></b_swiperBg>
			<c_menus v-if='item.name=="c_menus"' :dataConfig="item"></c_menus>
		
		<!--
			<d_news v-if='item.name=="d_news"' :dataConfig="item"></d_news>
			<e_activity v-if='item.name=="e_activity"' :dataConfig="item"></e_activity>
			<f_alive v-if='item.name=="f_alive"' :dataConfig="item"></f_alive>
			<f_scroll_box v-if='item.name=="f_scroll_box"' :dataConfig="item"></f_scroll_box>
			<g_recommend v-if='item.name=="g_recommend"' :dataConfig="item"></g_recommend>
			<h_popular v-if='item.name=="h_popular"' :dataConfig="item"></h_popular>
			<i_m_banner v-if='item.name=="i_m_banner"' :dataConfig="item"></i_m_banner>
			<i_new_goods v-if='item.name=="i_new_goods"' :dataConfig="item"></i_new_goods>
			<j_promotion v-if='item.name=="j_promotion"' :dataConfig="item"></j_promotion>-->
		</block>
		
		<view class="coupon-list" @click="tabs('/pages/users/user_get_coupon/index')">
			<view class="top-text">优惠劵
			<text class="rights">更多></text></text></view>
			<view class="coupon-centers">
				<view class="coupon-left">
					<view class="left">
						<view class="title_1">满<text class="font">2000</text>块</view>
						<view class="title_2">可使用</view>
						<view class="title_3">_RMB</view>
					</view>
					<view class="left">
						<view class="title_4">30</view>
						<view class="btn">立即领取</view>
					</view>
				</view>
				<view class="coupon-right">
					<view class="left">
						<view class="title_1">满<text class="font">10000</text>块</view>
						<view class="title_2">可使用</view>
						<view class="title_3">_RMB</view>
					</view>
					<view class="left">
						<view class="title_4">500</view>
						<view class="btn">立即领取</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="integrals">
			<image src="../../static/images/jifenshangcheng.png"></image>
			<!--
			<view class="s-jifen">
			  <image src="../../static/images/s-jifen.png" ></image>
			</view>
			<view class="text-info">
				<view class="font_1">积分商城</view>
				<view class="font_2">积分兑换好礼</view>
			</view>
			-->
		</view>
		
		<view class="share-box">
			<view class="share-i">
				<image src="../../static/images/s-yaoqinghaoyoiu.png"></image>
			</view>
		</view>
		<view class="buys">
			<view class="top_bar">
				商学院
			   <!--<text class="more-box" @click="tabs('/pages/shangxueyuan/index')">-->
			   <navigator class="more-box flex" hover-class="none" url="/pages/shangxueyuan/index" open-type="navigate">
				    更多
			   	  <text class="iconfont icon-xiangyou sizes" ></text>
			   </navigator>
			</view>
			<view class="buys_news">
				<view class="buys_item" v-for="value in videolist" >
					<view class="buys_images">
						<image :src="value.image"></image>
					</view>
					<view class="title">{{value.title}}</view>
				</view>
			</view>
		</view>
		
		
		<view class="recommend-list">
			 <view class="top-bar">
				 <text class="line" v-show="status==1"></text>
				 <view :class="{item_1:status==1,item_2:status!=1}" @click="changeTab('1')">
					 为您推荐
				 </view>
				 <view :class="{item_1:status==2,item_2:status!=2}" @click="changeTab('2')">
					 直播力荐
				 </view>
				 <text class="line_2" v-show="status==2"></text>
			 </view>
			 
			 <view class="class-product" v-show="status==1"  @click="tabs('/pages/goods_details/index?id='+value.id)">
				 <view class="product-item" v-for="value in recommendlist">
					 <view class="product-images">
						 <image :src="value.image"></image>
					 </view>
					 <view class="product-info">{{value.store_name}}</view>
					 <view class="cate-name">
						 <view class="cate-item">{{value.cate_name}}</view>
					 </view>
					 <view class="price"><text class="font-price">￥</text>{{value.price}}</view>
				 </view>
			 </view>
			 
			 <view class="class-product" v-show="status==2">
				 <view class="product-item" v-for="value in recommendlist" @click="tabs('/pages/goods_details/index?id='+value.id)">
					 <view class="product-images">
						 <image :src="value.image"></image>
					 </view>
					 <view class="product-info">{{value.store_name}}</view>
					 <view class="cate-name">
						 <view class="cate-item">{{value.cate_name}}</view>
					 </view>
					 <view class="price"><text class="font-price">￥</text>{{value.price}}</view>
				 </view>
			 </view>
		</view>
		
		<!-- #endif -->
		<view class="loadingicon acea-row row-center-wrapper" v-if="tempArr.length && styleConfig[styleConfig.length - 1].name == 'promotionList'">
			<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
			{{ loadTitle }}
		</view>
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse" :isGoIndex="false"></authorize> -->
		<!-- #endif -->
	</view>
</template>

<script>
import { goPage } from '@/libs/order.js'
// #ifdef H5
import mConfig from './components/index.js';
import { getShare } from '@/api/public.js';
// #endif
// #ifdef MP
import {
		SUBSCRIBE_MESSAGE,
		TIPS_KEY
	} from '@/config/cache';
import a_headerSerch from './components/a_headerSerch';
import b_swiperBg from './components/b_swiperBg';
import c_menus from './components/c_menus';
import d_news from './components/d_news';
import e_activity from './components/e_activity';
import f_scroll_box from './components/f_scroll_box';
import g_recommend from './components/g_recommend';
import h_popular from './components/h_popular';
import i_m_banner from './components/i_m_banner';
import i_new_goods from './components/i_new_goods';
import j_promotion from './components/j_promotion';
import f_alive from './components/f_alive'
import authorize from '@/components/Authorize.vue';
import { getTemlIds } from '@/api/api.js';
// #endif
import { mapGetters } from 'vuex';
import { getDiy, getIndexData,getIndexproduct,getIndexvideos,getindex_list } from '@/api/api.js';
import { getGroomList } from '@/api/store.js';
import { goShopDetail } from '@/libs/order.js';
import { toLogin } from '@/libs/login.js';
let app = getApp();
export default {
	computed: mapGetters(['isLogin', 'uid']),
	components: {
		// #ifdef H5
		...mConfig,
		// #endif
		// #ifdef MP
		authorize,
		a_headerSerch,
		b_swiperBg,
		c_menus,
		d_news,
		e_activity,
		f_scroll_box,
		g_recommend,
		h_popular,
		i_m_banner,
		i_new_goods,
		j_promotion,
		f_alive,
		authorize
		// #endif
	},
	data() {
		return {
			styleConfig: [],
			tempArr: [],
			status:'1',
			videolist:[],
			goodType: 3,
			loading: false,
			loadend: false,
			loadTitle: '下拉加载更多', //提示语
			page: 1,
			limit: this.$config.LIMIT,
			iSshowH: false,
			numConfig: 0,
			isIframe: false,
			activeName: '',
			recommendlist:''
		};
	},
	onLoad(options) {
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				try {
					uni.setStorageSync('user_latitude', res.latitude);
					uni.setStorageSync('user_longitude', res.longitude);
				} catch {}
			}
		});
		this.diyData();
		this.getIndexData();
		// #ifdef H5
		this.setOpenShare();
		window.addEventListener('message', this.handleMessageFromParent, false);
		if (app.globalData.isIframe) {
			uni.hideTabBar();
		}
		// #endif
		// #ifdef MP
		this.getTemlIds();
		// #endif
		
		getIndexproduct().then(res => {
			console.log(res)
			this.recommendlist=res.data.list
			
		});
		
		getindex_list(1,2).then(res => {
			//console.log(res.data.data.data)
			this.videolist=res.data.data.data
		});
		
	},
	onShow() {},
	mounted() {},
	methods: {
		
		tabs(url){
			//url='/pages/goods_details/index?id=62'
			goPage().then(res=>{
				uni.navigateTo({
					url:url
				})
			})
		},
		changeTab(value){
			let that=this
			that.status=value
			
			if(value==1){
				getIndexproduct().then(res => {
					console.log(res)
					this.recommendlist=res.data.list
					
				});
			}else{
				getIndexvideos().then(res => {
					console.log(res)
					this.recommendlist=res.data.list
					
				});
			}
		
		},
		// #ifdef MP
		getTemlIds() {
			let messageTmplIds = wx.getStorageSync(SUBSCRIBE_MESSAGE);
			if (!messageTmplIds) {
				getTemlIds().then(res => {
					if (res.data) wx.setStorageSync(SUBSCRIBE_MESSAGE, JSON.stringify(res.data));
				});
			}
		},
		// #endif
		onLoadFun() {},
		bindParent(item) {
			this.activeName = item.name;
			if (app.globalData.isIframe) {
				window.parent.postMessage(
					{
						name: item.name,
						params: {}
					},
					'*'
				);
				return;
			}
		},
		// #ifdef H5
		handleMessageFromParent(event) {
			var data = event.data;
			// console.log(event.data,'handleMessageFromParent')
		},
		// #endif
		// 对象转数组
		objToArr(data) {
			let obj = Object.keys(data);

			let m = obj.map(function(key) {
				data[key].name = key;
				return data[key];
			});
			return m;
		},
		diyData() {
			let that = this;
			getDiy().then(res => {
				try {
					if (res.data.a_headerSerch.hotList.list.length > 0) {
						uni.setStorageSync('hotList', res.data.a_headerSerch.hotList.list);
					}
				} catch (err) {}
				// let obj = {"name":"f_alive"}
				that.styleConfig = that.objToArr(res.data);
				// that.styleConfig.unshift(obj)
				// #ifdef MP
				let obj = {}
				obj.name = 'k_live'
				that.styleConfig.splice(5,0,obj)
				// #endif
			});
		},
		getIndexData() {
			let self = this;
			getIndexData().then(res => {
				self.$store.commit('indexData/setIndexData', res.data);
			});
		},
		// #ifdef H5
		// 微信分享；
		setOpenShare: function() {
			let that = this;
			if (that.$wechat.isWeixin()) {
				getShare().then(res => {
					let data = res.data.data;
					let configAppMessage = {
						desc: data.synopsis,
						title: data.title,
						link: location.href,
						imgUrl: data.img
					};
					that.$wechat.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData'], configAppMessage);
				});
			}
		}
		// #endif
	},
	onReachBottom: function() {
		// this.getGroomList();
	}
};
</script>

<style lang="scss">
	.recommend-list{
		width: 100%;
		overflow: hidden;
		margin: 0rpx auto;
		background: #F0F0F0;
		.class-product{
			margin: 0rpx auto;
			width: 100%;
			padding: 2%;
			overflow: hidden;
			line-height: 88rpx;
			.product-item{
				width: 49%;
				padding: 2%;
				float: left;
				margin-left: 1%;
				margin-top: 12rpx;
				font-size: 28rpx;
				overflow: hidden;
				background-color: #FFFFFF;
				.product-images{
					width: 100%;
					height: 398rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.product-info{
					width: 100%;
					overflow: hidden;
					line-height: 32rpx;
					text-align: center;
					font-size: 28rpx;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp:2;
					-webkit-box-orient: vertical;
				}
				.cate-name{
					width: 100%;
					overflow: hidden;
					margin: 20rpx auto;
					.cate-item{
						width: 228rpx;
						overflow: hidden;
						line-height: 44rpx;
						border-radius: 22rpx;
						text-align: center;
						color: #999999;
						background: #F8F8F8;
						font-size: 24rpx;
					}
				}
				.price{
					width: 100%;
					overflow: hidden;
					font-size: 36rpx;
					color: #FF0C0C;
					.font-price{
						font-size: 28rpx;
					}
					
				}
			}
		}
		.top-bar{
			width: 96%;
			padding: 2%;
			overflow: hidden;
			line-height: 88rpx;
			position: relative;
			background-color: #FFFFFF;
			.line{
				position: absolute;
				width: 68rpx;
				height: 6rpx;
				background: #D3AF6B;
				bottom: 20rpx;
				left:26px;
			}
			.line_2{
				position: absolute;
				width: 68rpx;
				height: 6rpx;
				background: #D3AF6B;
				bottom: 20rpx;
				left: 92px;
			}
			
			.item_1{
				width: 158rpx;
				overflow: hidden;
				line-height: 68rpx;
				text-align: center;
				color: #D3AF6B;
				font-weight: 600;
				font-size: 30rpx;
				float: left;
			}
			.item_2{
				width: 158rpx;
				overflow: hidden;
				line-height: 68rpx;
				text-align: center;
				color: #333333;
				font-size: 30rpx;
				float: left;
			}
			
		}
	}

	.buys{
		width: 96%;
		padding: 2%;
		overflow: hidden;
		background-color: #FFFFFF;
		margin: 0rpx auto;
		.sizes{
			font-size: 28rpx;
		}
		.top_bar{
			width: 100%;
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
			margin: 10rpx auto;
			position: relative;
			.more-box{
				position: absolute;
				width:88rpx;
				line-height: 48rpx;
				height: 48rpx;
				text-align: center;
				right: 0rpx;
				font-weight: 500;
				top: 0rpx;
				font-size: 26rpx;
			}
		}
		.buys_news{
			width: 100%;
			overflow: hidden;
			margin: 0rpx auto;
			.buys_item{
				float: left;
				width: 49%;
				margin-left: 1%;
				overflow: hidden;
				.buys_images{
					width: 100%;
					height: 168rpx;
					image{
						width: 100%;
						height: 168rpx;
					}
				}
				.title{
					font-size: 28rpx;
					color: #333333;
					font-weight: 600;
				}
				
			}
		}
	}
	.share-box{
		width: 96%;
		height: 178rpx;
		margin: 20rpx auto;
		image{
			width: 100%;
			height: 178rpx;
			margin:0rpx auto;
		}
		
	}
	.integrals{
		width: 96%;
		height: 178rpx;
		margin: 20rpx auto;
		image{
			width: 100%;
			height: 178rpx;
			margin:0rpx auto;
		}
		/**
		overflow:hidden;
		box-shadow: 0 0 2px #9C814E;
		background-color: #FFFFFF;
		padding: 2%;
		display: flex;**/
		
		.s-jifen{
			width: 12%;
			height: 98rpx;
			overflow: hidden;
			line-height: 98rpx;
			text-align: right;
			image{
				width:38rpx;
				height: 38rpx;
			}
		}
		.text-info{
			color: #333;
			width:86%;
			margin-left: 3%;
			text-align: left;
			overflow: hidden;
			.font_1{
				color: #D3AF6B;
				font-size: 32rpx;
				font-weight: 600;
			}
			.font_2{
				color: #333;
				font-size:28rpx;
			}
			
		}
	}
	.coupon-list{
		width:96%;
		margin: 0rpx auto;
		overflow:hidden;
		background-color: #D7B97F;
		padding: 2%;
		.top-text{
			font-size: 36rpx;
			color: #FFFFFF;
			position: relative;
			.rights{
				position: absolute;
				right: 10rpx;
				color: #FFFFFF;
				display: inline-block;
				width: 88rpx;
				height:38rpx ;
				line-height: 38rpx;
				font-size: 24rpx;
				border: 2rpx solid #FFFFFF;
				border-radius: 12rpx;
				top: 5rpx;
				text-align: center;
			}
		}
		.coupon-centers{
			width: 96%;
			overflow: hidden;
			margin: 20rpx auto;
			.coupon-left{
				width: 46%;
				padding: 2%;
				overflow: hidden;
				background-color: #FFFFFF;
				float: left;
				display: flex;
				.font{
					color: #D7B97F;
				}
				.left{
					width: 50%;
					overflow: hidden;
					font-size: 24rpx;
					.title_1{
						color: #333;
						font-size: 26rpx;
						font-weight: 600;
					}
					.title_2{
						color: #333;
						font-size: 24rpx;
					}
					.title_3{
						color: #333;
						font-size: 24rpx;
					}
					.title_4{
						color: #D7B97F;
						text-align: center;
						font-size: 32rpx;
						font-weight: 600;
					}
					.btn{
						width: 90%;
						line-height: 38rpx;
						height: 38rpx;
						font-size: 28rpx;
						text-align: center;
						color: #333333;
						border: 2rpx solid #D7B97F;
						border-radius: 6rpx;
						margin: 10rpx auto;
					}
				}
			}
			.coupon-right{
				width: 46%;
				padding: 2%;
				overflow: hidden;
				background-color: #FFFFFF;
				float: left;
				margin-left: 5%;
				display: flex;
				.font{
					color: #D7B97F;
				}
				.left{
					width: 50%;
					overflow: hidden;
					font-size: 24rpx;
					.title_1{
						color: #333;
						font-size: 26rpx;
						font-weight: 600;
					}
					.title_2{
						color: #333;
						font-size: 24rpx;
					}
					.title_3{
						color: #333;
						font-size: 24rpx;
					}
					.title_4{
						color: #D7B97F;
						text-align: center;
						font-size: 32rpx;
						font-weight: 600;
					}
					.btn{
						width: 90%;
						line-height: 38rpx;
						height: 38rpx;
						font-size: 28rpx;
						text-align: center;
						color: #333333;
						border: 2rpx solid #D7B97F;
						border-radius: 6rpx;
						margin: 10rpx auto;
					}
				}
			}
		}
	}
	page{background: #fff;}
</style>
